<template>
  <div class="app-container" v-loading="loading">

    <!--↓  交互不变-->
    <div class="action-container">
      <el-button type="primary" icon="el-icon-refresh" size="small" @click="refresh">刷新</el-button>
      <el-button icon="el-icon-menu" size="small" v-show="multipleSelectionMode==false && multipleSelectionReleaseMode==false" @click="openManageDeskType">桌型管理
      </el-button>

      <!--<el-button icon="el-icon-plus" size="small" type="primary" @click="openCreatedDialog">添加餐桌</el-button>-->
      <el-button v-if="!multipleSelectionMode && multipleSelectionReleaseMode==false" icon="el-icon-delete" size="small"
                 @click="multipleSelectionMode=!multipleSelectionMode">批量删除
      </el-button>
      <el-button type="danger" v-if="multipleSelectionMode" icon="el-icon-delete" size="small" @click="deleteDesks">删除
      </el-button>
      <el-button v-if="multipleSelectionMode" icon="el-icon-close" size="small" @click="multipleSelectionMode=false">
        取消
      </el-button>

      <el-button v-if="!multipleSelectionReleaseMode && multipleSelectionMode==false" icon="el-icon-unlock" size="small"
                 @click="multipleSelectionReleaseMode=!multipleSelectionReleaseMode">释放餐桌
      </el-button>
      <el-button type="danger" v-if="multipleSelectionReleaseMode" icon="el-icon-unlock" size="small"
                 @click="releaseDesks">释放
      </el-button>
      <el-button v-if="multipleSelectionReleaseMode" icon="el-icon-close" size="small"
                 @click="multipleSelectionReleaseMode=false">
        取消
      </el-button>


      <el-popover
        placement="top"
        width="210"
        v-model="teaPriceChange">
        <p>修改茶位费</p>
        <el-input-number v-model="teaPrice.price" :precision="2" :step="1" :min="0" :max="9999"
                         label="修改茶位费"></el-input-number>
        <div style="text-align: right; margin: 10px 0 0 0">
          <el-button size="mini" type="text" @click="teaPriceChange = false">取消</el-button>
          <el-button type="primary" size="mini" @click="setTeaPrice">确定</el-button>
        </div>

        <el-button v-show="multipleSelectionMode==false && multipleSelectionReleaseMode==false" slot="reference" size="small" @click="getTeaPrice">茶位费设置</el-button>
      </el-popover>

    </div>
    <div class="filter-container">
      <el-select v-model="query.deskRoomId" clearable placeholder="餐桌位置" @change="search">
        <el-option
          v-for="item in deskRoomOptions"
          :key="item.value"
          :label="item.name"
          :value="item.value">
        </el-option>
      </el-select>
      <el-select v-model="query.deskTypeId" clearable placeholder="餐桌类型" @change="search">
        <el-option
          v-for="item in deskTypeOptions"
          :key="item.value"
          :label="item.name"
          :value="item.value">
        </el-option>
      </el-select>
      <el-select v-model="query.status" clearable placeholder="餐桌状态" @change="search">
        <el-option
          v-for="item in deskStatusOptions"
          :key="item.value"
          :label="item.name"
          :value="item.value">
        </el-option>
      </el-select>
      <!--<el-button type="primary" icon="el-icon-search" class="filter-item" @click="search">搜索</el-button>-->
      <!--<el-button class="filter-item" @click="reset">重置</el-button>-->

      <!--<el-button type="" style="margin-left: 10px">管理桌型</el-button>-->
      <!--<el-button type="">茶位费设置</el-button>-->

    </div>
    <!--↑  交互不变-->

    <!--方块餐桌显示-->
    <div class="desk_all_box">
      <el-row>
        <!--添加桌台-->
        <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" class="desk_square">
          <div class="desk_square_content add_desk" @click="openCreatedDialog()">
            <p class="">
              <i></i>
              <span>添加桌台</span>
            </p>
          </div>
        </el-col>
        <!--桌台列表-->
        <template v-for="table in tableData">
          <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" class="desk_square">
            <div class="desk_square_content" @click.prevent="openEditDialog(table)">
              <div class="table_num">
                <p style="text-align: center">
                  <span>{{table.deskName}}</span>
                  <span>桌</span>
                </p>
              </div>
              <div class="table_type">
                <span style="position: absolute;top: 50%;font-size: 14px;color: #666666;margin-top: -10px;left: 15px">{{table.deskRoomName}}-{{table.deskTypeName}}&nbsp({{table.status|statusFil}})</span>
                <span
                  style="position: absolute;top: 50%;font-size: 14px;color: #666666;margin-top: -10px;right: 15px">{{table.minAmount}}-{{table.maxAmount}}人</span>
              </div>
              <p :class="{'no-select':multipleSelectionMode || multipleSelectionReleaseMode}">
                <span :class="{selectImg:table.active}" @click.stop="pitchon(table,table.deskId)"></span>
              </p>
            </div>
          </el-col>
        </template>
      </el-row>
    </div>

    <!--
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            prop="deskName"
            label="餐桌编号">
          </el-table-column>
          <el-table-column
            prop="deskTypeName"
            label="餐桌类型">
          </el-table-column>
          <el-table-column
            prop="deskRoomName"
            label="餐桌位置">
          </el-table-column>
          <el-table-column
            prop="minMoney"
            label="最低消费">
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间">
          </el-table-column>
          <el-table-column
            label="编辑"
            align="left" min-width="90">
            <template slot-scope="scope">
              <el-button style="padding: 7px 27px;margin-left: 10px;margin-bottom: 3px" size="mini" type="primary"
                         icon="el-icon-edit" @click="openEditDialog(scope.row)">编辑
              </el-button>
            </template>
          </el-table-column>
        </el-table>-->
    <pagination
      :total-elements="totalElements"
      :change-callback="getDeskList"
      ref="page"></pagination>
    <!--管理桌型-->
    <el-dialog
      title="管理桌型"
      :visible.sync="manageDeskType"
      width="30%"
      :before-close="closeManageDeskType"
    >
      <el-table
        :data="deskTypeData"
        style="width: 100%">
        <el-table-column
          prop="name"
          label="桌型"
          width="300">
        </el-table-column>
        <el-table-column
          prop="address"
          label="操作">

          <template slot-scope="scope">
            <el-button
              icon="el-icon-edit"
              size="mini"
              @click="openTypeEditDialog(scope.row)">编辑
            </el-button>

            <el-button
              icon="el-icon-delete"
              size="mini"
              type="danger"
              @click="deleteDeskTypes(scope.row)">删除
            </el-button>
          </template>

        </el-table-column>
      </el-table>

      <div slot="footer" class="dialog-footer">
        <el-button @click="closeManageDeskType">取 消</el-button>
        <el-button type="primary" @click="addDeskTypeDialog" :loading="btnLoading">新增桌型</el-button>
      </div>
    </el-dialog>

    <!--添加桌型-->
    <el-dialog
      title="添加位置"
      :visible.sync="deskTypeAddDialog"
      :before-close="closeDeskTypeAddDialog">
      <el-form :model="newTypeform">
        <el-form-item label="名称" :label-width="formLabelWidth">
          <el-input v-model="newTypeform.name" placeholder="桌型名称"></el-input>
        </el-form-item>
        <el-form-item label="最少人数" :label-width="formLabelWidth">
          <el-input-number v-model="newTypeform.minAmount" :precision="0" :step="1" :min="1" :max="999"
                           label="最少人数"></el-input-number>
          <!--<el-input v-model="newTypeform.minAmount" type="number"  placeholder="最少人数，限数字"></el-input>-->
        </el-form-item>
        <el-form-item label="最多人数" :label-width="formLabelWidth">
          <el-input-number v-model="newTypeform.maxAmount" :precision="0" :step="1" :min="0" :max="100"
                           label="最多人数"></el-input-number>
          <!--<el-input v-model="newTypeform.maxAmount" type="number"  placeholder="最多人数，限数字"></el-input>-->
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDeskTypeAddDialog">取 消</el-button>
        <el-button type="primary" @click="addDeskType" :loading="btnLoading">确 定</el-button>
      </div>
    </el-dialog>

    <!--*********************以下是餐桌编辑****************-->


    <!--编辑桌型-->
    <el-dialog
      title="编辑桌型"
      :visible.sync="editTypeDialog"
      :before-close="closeTypeEditDialog">
      <el-form>
        <el-form-item label="名称" :label-width="formLabelWidth">
          <el-input v-model="currentTypeRow.name"></el-input>
        </el-form-item>
        <el-form-item label="最少人数" :label-width="formLabelWidth">
          <el-input-number v-model="currentTypeRow.minAmount" :precision="0" :step="1" :min="1" :max="999"
                           label="最少人数"></el-input-number>
        </el-form-item>
        <el-form-item label="最多人数" :label-width="formLabelWidth">
          <el-input-number v-model="currentTypeRow.maxAmount" :precision="0" :step="1" :min="1" :max="999"
                           label="最少人数"></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeTypeEditDialog">取 消</el-button>
        <el-button type="primary" @click="editDeskType">确 定</el-button>
      </div>
    </el-dialog>
    <!--添加餐桌-->
    <el-dialog
      title="添加餐桌"
      :visible.sync="createdDialog"
      :before-close="closeCreatedDialog">
      <el-form :model="form">
        <el-form-item label="餐桌位置" :label-width="formLabelWidth">
          <el-select v-model="form.deskRoomId" placeholder="请选择">
            <el-option
              v-for="item in deskRoomOptions"
              :key="item.value"
              :label="item.name"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="餐桌类型" :label-width="formLabelWidth">
          <el-select v-model="form.deskTypeId" placeholder="请选择">
            <el-option
              v-for="item in deskTypeOptions"
              :key="item.value"
              :label="item.name"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="桌台数量" :label-width="formLabelWidth">
          <el-input-number :precision="0" :min="0" v-model="form.amount"></el-input-number>
        </el-form-item>
        <el-form-item label="桌台前缀" :label-width="formLabelWidth">
          <el-input v-model="form.prefix"></el-input>
        </el-form-item>
        <el-form-item label="桌台编号" :label-width="formLabelWidth">
          <el-input type="text" v-model="form.serialNumber"></el-input>
        </el-form-item>
        <el-form-item label="最低消费" :label-width="formLabelWidth">
          <el-input-number :min="0" v-model="form.minMoney"></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeCreatedDialog">取 消</el-button>
        <el-button type="primary" @click="addDesk" :loading="btnLoading">确 定</el-button>
      </div>
    </el-dialog>
    <!--修编编辑桌类和桌号-->
    <el-dialog
      title="编辑信息"
      :visible.sync="editDialog"
      :before-close="closeEditDialog">
      <el-form :model="currentRow">
        <el-form-item label="餐桌类型" :label-width="formLabelWidth">
          <el-select v-model="currentRow.deskTypeId" placeholder="请选择">
            <el-option
              v-for="item in deskTypeOptions"
              :key="item.value"
              :label="item.name"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="桌台编号" :label-width="formLabelWidth">
          <el-input v-model="currentRow.name"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeEditDialog">取 消</el-button>
        <el-button type="primary" @click="editDesk" :loading="btnLoading">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {
    deskTypeList,
    deskTypeUpdate,
    deskTypeLogicalDel,
    deskTypeAdd,
    getStoreTeaPrice,
    setStoreTeaPrice,
    deskRoomSelectItem,
    deskTypeSelectItem,
    deskList,
    deskAdd,
    deskUpdate,
    deskLogicalDel,
    deskTypeLogicalrelese
  } from '../api/desk'
  import pagination from '@/components/pagination/index'
  import Vue from 'vue'

  export default {
    name: 'desk',
    data() {
      return {
        storeId: sessionStorage.getItem('storeId'),
        tableData: [], // 表格数据
        totalElements: 0, // 数据条数
        multipleSelectionMode: false,//多选删除模式
        multipleSelectionReleaseMode: false,//多选释放模式
        multipleSelection: [], // 选中数据-多选
        multipleSelectionRelease: [], // 选中数据-多选--释放
        // selectionTable:[],//选中，样式修改
        loading: true, // loading效果
        createdDialog: false, // 餐桌模态框
        formLabelWidth: '120px',
        deskRoomOptions: [],
        deskTypeOptions: [],
        deskStatusOptions: [
          {value: '', name: '全部状态'},
          {value: '1', name: '空闲'},
          {value: '2', name: '锁定'},
          {value: '3', name: '就餐'},
        ],
        query: {
          deskRoomId: '',
          deskTypeId: '',
          status: '',
        },
        specListForm: {
          list: [],
        },
        form: {
          deskRoomId: '',
          deskTypeId: '',
          amount: '',
          prefix: '',
          serialNumber: '',
          minMoney: '',
          storeId: sessionStorage.getItem('storeId')
        }, // 餐桌数据
        btnLoading: false, // 按钮loading
        editDialog: false, // 编辑模态框,
        currentRow: {
          id: '',
          name: '',
          deskTypeId: '',
        },
        headers: {
          accessToken: sessionStorage.token
        }, // 请求头部

        manageDeskType: false, //管理桌型模态框
        deskTypeData: [],//桌型数据
        editTypeDialog: false,//编辑桌型模态框
        currentTypeRow: {
          id: '',
          name: '',
          minAmount: '',
          maxAmount: ''
        },//桌型表格数据
        deskTypeAddDialog: false,
        newTypeform: {
          storeId: sessionStorage.getItem('storeId'),
          name: '', //名称
          minAmount: '1', //最少人数
          maxAmount: '2', //最多人数
        },
        teaPriceChange: false,//显示修改茶位费
        teaPrice: {
          price: 0,//茶位费
          teaid: '',//茶位id
        },
      }
    },
    components: {pagination},
    created() {
      this.getDeskList();
      this.getDeskRoomSelectItem();
      this.getDeskTypeSelectItem();
      this.getDeskTypeList()
    },
    filters: {
      statusFil: function (val) {
        if (val == '' || val == null || val == undefined) {
          return '未知'
        }
        let v = parseInt(val);
        let text = '';
        switch (v) {
          case 1:
            text = '空闲';
            break;
          case 2:
            text = '锁定';
            break;
          case 3:
            text = '就餐';
            break;
          default:
            text = '未知';
            break;
        }
        return text
      }
    },
    watch: {
      /*
     * 监听多选模式是否取消，如果取消，清除所有被选中的deskId
     * */
      multipleSelectionMode: function (newValue) {
        if (newValue == false) {
          this.multipleSelection = [];
          this.refresh();
        }
        //console.log(this.multipleSelection)
      },
      multipleSelectionReleaseMode: function (newValue) {
        if (newValue == false) {
          this.multipleSelectionRelease = [];
          this.refresh();
        }
        //console.log(this.multipleSelection)
      }
    },
    methods: {
      /*
      * 获取桌型列表
      * */
      getDeskTypeList: function () {
        deskTypeList().then(response => {
          let data = response.obj;
          this.deskTypeData = data.content
        })
      },
      /*
      * 关闭桌型编辑模态框
      * */
      closeTypeEditDialog: function () {
        this.editTypeDialog = false
      },
      /*
      * 打开桌型编辑模态框
      * */
      openTypeEditDialog: function (row) {
        console.log('桌数据' + row);
        this.editTypeDialog = true;
        this.currentTypeRow.id = row.id;
        this.currentTypeRow.name = row.name;
        this.currentTypeRow.minAmount = row.minAmount;
        this.currentTypeRow.maxAmount = row.maxAmount;
        // this.editDialog = true
      },
      /*
      * 关闭桌型编辑模态框
      * */
      closeTypeEditDialog: function () {
        this.editTypeDialog = false;
        this.currentTypeRow.id = '';
        this.currentTypeRow.name = '';
        this.currentTypeRow.minAmount = '';
        this.currentTypeRow.maxAmount = '';
      },
      /*
      * 提交桌型编辑
      * */
      editDeskType: function () {
        this.loading = true;
        this.btnLoading = true;
        deskTypeUpdate(this.currentTypeRow).then(response => {
          this.$message({
            message: response.msg,
            type: 'success'
          });
          this.btnLoading = false;
          this.closeTypeEditDialog();
          this.getDeskTypeList();
          this.getDeskRoomSelectItem();
          this.getDeskTypeSelectItem();
          this.$refs.page.refresh();
        }).catch(() => {
          this.btnLoading = false;
          this.loading = false
        })
      },
      /*
      * 删除某个餐桌类型
      * */
      deleteDeskTypes: function (row) {
        this.$confirm('是否删除桌型？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if (row != null) {
            this.loading = true;
            let ids = [];
            ids.push(row.id);
            deskTypeLogicalDel(ids).then(response => {
              this.$message({
                message: response.msg,
                type: 'success',
                duration: 1000
              });
              this.getDeskTypeList();
              this.getDeskRoomSelectItem();
              this.getDeskTypeSelectItem();
              this.$refs.page.refresh()
            }).catch(() => {
              this.loading = false
            })
          } else {
            this.$message({
              message: '请选择桌型',
              type: 'warning',
              duration: 1000
            })
          }
        })
      },

      /*
      * 关闭桌型编辑模态框
      * */
      closeManageDeskType() {
        this.manageDeskType = false
      },
      /*
      * 添加桌型模态框
      * */
      addDeskTypeDialog: function () {
        this.deskTypeAddDialog = true;
      },

      /*
       * 添加桌型
       * */
      addDeskType() {
        this.loading = true;
        this.btnLoading = true;
        deskTypeAdd(this.newTypeform).then(response => {
          this.$message({
            message: response.msg,
            type: 'success'
          });
          this.btnLoading = false;
          this.newTypeform.name = '';
          this.newTypeform.minAmount = '';
          this.newTypeform.maxAmount = '';
          //↑ 清空数据
          this.closeDeskTypeAddDialog();
          this.getDeskTypeList();
          this.getDeskRoomSelectItem();
          this.getDeskTypeSelectItem();
          this.$refs.page.refresh()
        }).catch(() => {
          this.btnLoading = false;
          this.loading = false
        })
      },
      /*
      * 关闭桌型模态框
      * */
      closeDeskTypeAddDialog: function () {
        this.deskTypeAddDialog = false;
        this.newTypeform.name = '';
        this.newTypeform.minAmount = '1';
        this.newTypeform.maxAmount = '2';
      },
      /*
      * 获取茶位费
      * */
      getTeaPrice: function () {
        getStoreTeaPrice().then(response => {
          let data = response.obj;
          this.teaPrice.price = data.money;
          this.teaPrice.teaid = data.id;
        }).catch(() => {
          this.$message({
            message: response.msg,
            type: 'warning',
            duration: 2000
          })
        })
      },
      /*
      * 设置茶位费
      * */
      setTeaPrice: function () {
        let newValue = this.teaPrice.price;//价格
        let tid = this.teaPrice.teaid;//id
        if (newValue < 0 || newValue >= 9999) {
          //判断负值
          this.teaPrice.price = '0';
          this.$message({
            message: '超出允许设置的范围，茶位费：0~9999',
            type: 'warning',
            duration: 3000
          });
          return false;
        } else {
          setStoreTeaPrice(tid, newValue).then(response => {
            this.$message({
              message: response.msg,
              type: 'success'
            });
            this.teaPriceChange = false;
          }).catch(() => {
            this.$message({
              message: response.msg,
              type: 'success'
            })
          })
        }

      },


      //********************************************************
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      handleDelete(row) {
        this.multipleSelection.push(row);
        this.deleteDesks()
      },

      /*
      * 获取餐桌列表
      * */
      getDeskList: function (number, pageSize) {
        this.loading = true;
        deskList(number, pageSize, this.query).then(response => {
          let data = response.obj.rows;
          this.tableData = data;
          this.totalElements = response.obj.total;
          this.loading = false;
          console.log(this.tableData)
        }).catch(() => {
          this.loading = false
        })
      },
      /*
      * 刷新
      * */
      refresh() {
        this.$refs.page.refresh()
      },
      // 获取餐桌位置
      getDeskRoomSelectItem: function () {
        deskRoomSelectItem().then(response => {
          this.deskRoomOptions = response.obj
        })
      },
      // 获取餐桌类型
      getDeskTypeSelectItem: function () {
        deskTypeSelectItem().then(response => {
          // console.log(response.obj)
          this.deskTypeOptions = response.obj
        })
      },
      /*
      * 打开餐桌模态框
      * */
      openCreatedDialog() {
        this.createdDialog = true
        // this.getDeskRoomSelectItem()
      },
      /*
      * 关闭餐桌模态框
      * */
      closeCreatedDialog() {
        this.createdDialog = false;
        this.form = {
          deskTypeId: '',
          deskRoomId: '',
          amount: '',
          prefix: '',
          serialNumber: '',
          minMoney: '',
          storeId: sessionStorage.getItem('storeId')
        } // 餐桌数据

      },
      /*
      * 添加餐桌
      * */
      addDesk() {
        this.loading = true;
        this.btnLoading = true;
        console.log(this.form);
        deskAdd(this.form).then(response => {
          this.$message({
            message: response.msg,
            type: 'success'
          });
          this.btnLoading = false;
          this.$refs.page.refresh();
          this.closeCreatedDialog();
          this.getDeskList()
        }).catch(() => {
          this.btnLoading = false;
          this.loading = false
        })
      },
      /*
      * 打开编辑模态框
      * */
      openEditDialog(row) {
        if (this.multipleSelectionMode) {
          this.$message('批量选择时无法编辑餐桌信息。');
          return;
        }
        this.currentRow.id = row.deskId;
        this.currentRow.name = row.deskName;
        this.currentRow.deskTypeId = row.deskTypeId;
        console.log(this.currentRow);
        this.getDeskTypeSelectItem();
        this.editDialog = true
      },

      openManageDeskType() {
        this.manageDeskType = true;
      },
      /*
      * 关闭编辑模态框
      * */
      closeEditDialog() {
        this.editDialog = false
      },

      /*
      * 编辑
      * */
      editDesk() {
        this.loading = true;
        this.btnLoading = true;
        console.log(this.currentRow);
        deskUpdate(this.currentRow).then(response => {
          this.$message({
            message: response.msg,
            type: 'success'
          });
          this.btnLoading = false;
          this.loading = false;
          this.closeEditDialog();
          this.refresh()
        }).catch(() => {
          this.loading = false;
          this.btnLoading = false
        })
      },

      /*
      * 汇集选中的餐桌，并修改样式,
      * 取消时候，删除被选中列表
      * */
      pitchon(table, deskid) {
        if (this.multipleSelectionMode == true && this.multipleSelectionReleaseMode == false) {
          if (table.active) {
            Vue.set(table, 'active', false);  //为item添加不存在的属性，需要使用vue提供的Vue.set( object, key, value )方法
            for (let i = 0; i < this.multipleSelection.length; i++) {
              if (this.multipleSelection[i].id === deskid) {
                this.multipleSelection.splice(i, 1);
              }
            }
            // console.log(this.multipleSelection)
          } else {
            Vue.set(table, 'active', true);
            this.multipleSelection.push({id: deskid});
            // console.log(this.multipleSelection)
          }
        } else if (this.multipleSelectionMode == false && this.multipleSelectionReleaseMode == true) {
          if (table.active) {
            Vue.set(table, 'active', false);  //为item添加不存在的属性，需要使用vue提供的Vue.set( object, key, value )方法
            for (let i = 0; i < this.multipleSelectionRelease.length; i++) {
              if (this.multipleSelectionRelease[i].id === deskid) {
                this.multipleSelectionRelease.splice(i, 1);
              }
            }
            // console.log(this.multipleSelection)
          } else {
            Vue.set(table, 'active', true);
            this.multipleSelectionRelease.push({id: deskid});
            // console.log(this.multipleSelection)
          }
        }

      },

      /*
      * 删除餐桌
      * */
      deleteDesks() {
        this.$confirm('是否删除这些餐桌？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if (this.multipleSelection.length) {
            this.loading = true;
            let ids = [];
            this.multipleSelection.forEach((item) => {
              ids.push(item.id)
            });
            deskLogicalDel(ids).then(response => {
              this.$message({
                message: response.msg,
                type: 'success',
                duration: 1000
              });
              this.multipleSelection = [];
              this.multipleSelectionMode = false;//多选模式取消
              this.$refs.page.refresh()
            }).catch(() => {
              this.loading = false
            })
          } else {
            this.$message({
              message: '请选择餐桌',
              type: 'warning',
              duration: 1000
            })
          }
        })
      },

      /*
     * 释放餐桌
     * */
      releaseDesks() {
        this.$confirm('是否释放这些餐桌？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if (this.multipleSelectionRelease.length) {
            this.loading = true;
            let ids = [];
            this.multipleSelectionRelease.forEach((item) => {
              ids.push(item.id)
            });
            deskTypeLogicalrelese(ids).then(response => {
              this.$message({
                message: response.msg,
                type: 'success',
                duration: 1000
              });
              this.multipleSelectionRelease = [];
              this.multipleSelectionReleaseMode = false;//多选模式取消
              this.$refs.page.refresh()
            }).catch(() => {
              this.loading = false
            })
          } else {
            this.$message({
              message: '请选择餐桌',
              type: 'warning',
              duration: 1000
            })
          }
        })
      },

      //重置
      reset() {
        this.query = {
          deskTypeId: '',
          deskRoomId: '',
        };
        this.$refs.page.search()
      },
      /*
      * 搜索
      * */
      search() {
        this.$refs.page.search()
      },
    }
  }
</script>

<style scoped>
  .logo-uploader {
    display: inline-block;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .logo-uploader:hover {
    border-color: #409EFF;
  }

  .logo-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .logo {
    width: 178px;
    height: 178px;
    display: block;
  }

  .desk_all_box {
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 20px 0 20px 0;
    margin-left: -14px;
    margin-right: -14px;
  }


  .desk_square {
    padding-left: 14px;
    padding-right: 14px;
  }

  .desk_square_content {
    position: relative;
    margin-bottom: 16px;
    height: 98px;
    border-radius: 5px;
    background-color: white;
    border: 1px solid #d0d0d0;
  }

  .desk_square :hover {
    cursor: pointer;
  }

  .add_desk > p {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 84px;
    height: 18px;
    margin-top: -9px;
    margin-left: -42px;
  }


  .add_desk > p span {
    position: relative;
    top: -3px;
    left: 4px;
    font-size: 14px;
    color: #999999;
  }

  .add_desk > p i {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    background: url() no-repeat;
    background-size: 100% 100%;
  }

  .add_desk :hover p i {
    background-size: 100% 100%;
    background: url() no-repeat;
  }

  .table_num {
    width: 100%;
    height: 64px;
    line-height: 64px;
    margin-top: -17px;
    background-color: #2E3E52;
    border-radius: 4px 4px 0 0;
  }

  .table_num span {
    color: white;
    font-size: 20px;
  }

  .table_type {
    position: relative;
    width: 100%;
    height: 34px;
  }

  .no-select {
    position: absolute;
    top: -25px;
    right: -10px;
    width: 26px;
    height: 26px;
  }

  .no-select span {
    display: inline-block;
    width: 26px;
    height: 26px;
    background: url() no-repeat;
    background-size: 100% 100%;
  }

  .selectImg {
    background: url() no-repeat !important;
    background-size: 100% 100%;
  }


</style>
